<template>
    <div class="container" v-if="userinfo">
        <div class="nicknameavatar">
            <el-avatar :size="50" :src="baseURL + userinfo.avatar" />
            <div class="nickname">{{ userinfo.nickname }}</div>
        </div>
        <div class="email">
            <div class="email-content">用户邮箱：{{ userinfo.email }}</div>
        </div>
        <div class="introduce">
            <div class="introduce-content">个性宣言：{{ userinfo.introduce }}</div>
        </div>
    </div>
    <hr>
    <!-- 帖子区域 -->   
    <div class="postarea">
        <div class="postlist">
            <div class="post" v-for="(item, index) in postlist" :key="index">
                <div class="post-title" @click="godetail(item.id)"><h2>{{ item.title }}</h2></div>
                <div class="post-content" @click="godetail(item.id)" v-html="item.content"></div>
                <div class="post-footer" @click="godetail(item.id)">
                    <div class="post-like">点赞：{{ item.like_count }}</div>
                    <div class="post-favorite">收藏：{{ item.favorite_count }}</div>
                    <div class="post-time">发布于：{{ item.created_at }}</div>
                </div>
                <div class="post-button" v-if="userstore.userInfo.id == item.user.id">
                    <el-button class="itembtn" type="primary" size="small" @click="changepost(item.id)">修改</el-button>
                    <el-button class="itembtn" type="danger" size="small" @click="userdeletepost(item.id)">删除</el-button>
                </div>
                <hr>

            </div>
        </div>
    </div>








    <!-- 提示框 -->
    <el-dialog
    v-model="dialogVisible"
    title="提示"
    width="500"
  >
    <span>您确定要删除该帖子吗？</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="danger" @click="confimdialogVisible">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user';
import { baseURL } from '@/baseurl';
import {getuserpost,deletepost} from '@/apis/post'
import {getotheruserinfo} from '@/apis/user'
import { useRouter } from 'vue-router';
import {toast} from '@/composables/utils'
import { ElMessageBox } from 'element-plus'



const dialogVisible = ref(false)
const route = useRoute()
const userstore = useUserStore()
const userinfo = ref(null)
const postlist = ref([])
const router = useRouter()
const postid = ref(0)



onMounted(() => {
    console.log("用户主页", route.query)
    if (!route.query.id) {
        userinfo.value = userstore.userInfo
        getuserpost(userstore.userInfo.id).then(res => {
            postlist.value = res.data
        })
    } else {
        getotheruserinfo(route.query.id).then(res => {
            userinfo.value = res.data
        })
        getuserpost(route.query.id).then(res => {
            postlist.value = res.data
        })
    }

})

function godetail(id) {
    router.push({
        path: '/post/'+id
    })
}

function changepost(id) {
    console.log("修改帖子", id)
    router.push({
        path: '/changepost/'+id
    })
}


function userdeletepost(id) {
    console.log("删除帖子", id)
    postid.value = id
    dialogVisible.value = true
    // deletepost()
}




// 确认删除
function confimdialogVisible() {
    dialogVisible.value = false
    console.log("确认删除了")
    deletepost({postid: postid.value}).then(
        res=> {
            toast("删除成功", "success")
            // 刷新当前页
            window.location.reload();
        }
    )
}

</script>
<style scoped>
h2{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.post-title{
    margin-top: 10px;
    margin-bottom: 10px;
    width: 90%;
    margin-left: 5%;
    cursor: pointer;
}
.post-content{
    margin-top: 10px;
    margin-bottom: 10px;
    width: 90%;
    margin-left: 5%;
    cursor: pointer;
    height: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: wrap;
}
.itembtn{
    margin-left: 2%;
    margin-top: 10px;
    width: 45%;
    margin-bottom: 10px;
}
.post-footer{
    display: flex;
    justify-content: space-evenly;
    cursor: pointer;
}
.email{
    margin-left: 20%;
    margin-top: 20px;
    padding: 10px;

}
.introduce{
    margin-left: 20%;
    width: 80%;
    margin-top: 10px;
    height: 100px;
    padding: 10px;

}
.nickname {
    font-size: 20px;
    margin-left: 10px;
    font-weight: bold;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.container {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
}

.nicknameavatar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
</style>